<template>
	<view class="container" :style="{'height':height + 'px'}">

		<view class="login flex justify-center align-center flex-direction">
			<image class="logo" :src="appConfig.logo || '/static/images/login/logo.png'" mode="widthFix"></image>
			<view class="mt-6">
				<text class="f-s12 text-bold">搭搭陪伴管理端</text>
			</view>
			<view class="ipt flex align-center m-t44">
				<view class="">
					<text class="text-bold" style="padding-right: 20rpx;">+86</text>
					<image src="/static/images/login/arrow.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
				</view>
				<view class="" style="width: 2rpx;height: 46rpx;border: 1rpx solid #DDE0E6;margin: 0 34rpx 0 20rpx;">

				</view>
				<input type="number" maxlength="11" placeholder="输入手机号" v-model="phonenumber">
			</view>
			<view class="self-btn m-t30" hover-class="pressed" @click="handleSubmit">
				登录
			</view>
			<view class="flex align-baseline m-t16" style="width: 630rpx;">
				<u-checkbox-group v-model="checked" @change="handleCheckboxChange">
					<u-checkbox activeColor="#FE3F59" size="32rpx" :name="true"></u-checkbox>
				</u-checkbox-group>
				<view class="f-s12 line-height22">
					我已阅读并同意<text class="text-theme"
						@click="handleToPage('/pages/common/document/index?title=用户协议')">《用户协议》</text>和<text
						class="text-theme"
						@click="handleToPage('/pages/common/document/index?title=隐私政策')">《隐私政策》</text>，未注册的手机号将自动创建账号。
				</view>
			</view>
			<view class="flex align-center tips">
				<image src="/static/images/login/look-out.png" class="width-14 m-r5" mode="widthFix"></image>
				<text class="text-theme f-s12">该版本为管理端，预约下单请访问公众号：搭搭陪伴</text>
			</view>
			<Toast></Toast>
			<!-- #ifdef APP-PLUS -->
			<!-- 更新专用 -->
			<!-- <wrap-version-update :id="HOT_ID" :apiUrl="HOT_API_URL" :pageUrl="HOT_PAGE_URL">
		</wrap-version-update> -->
			<!-- #endif -->
		</view>

	</view>
</template>

<script>
	import {
		appConfig
	} from "@/api/document"
	import {
		getCode
	} from '@/api/login.js'
	export default {

		data() {
			return {
				height: '100%',
				appConfig: {},
				checked: [false],
				// phonenumber: getApp().globalData.config.MOBILE,
				phonenumber: '',
				windowHeight: `${uni.getSystemInfoSync().windowHeight}px`
			}
		},

		onLoad() {
			
			let login_number = uni.getStorageSync('login_number')
			if (login_number) this.phonenumber = login_number
			this.getAppConfig()
			// 兼容ios_app，解决底部fixed定位被键盘顶起问题
			this.height = uni.getSystemInfoSync().windowHeight
		},
		methods: {
			getAppConfig() {
				// 获取应用配置
				appConfig().then(res => {
					this.appConfig = res.data || {}
				}).catch(() => {
					this.appConfig = {}
				})
			},
			handleCheckboxChange(val) {
				this.checked = val[0]
			},
			handleToPage(path) {
				this.$tab.navigateTo(path)
			},
			handleSubmit() {
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (this.phonenumber && !phoneRegex.test(this.phonenumber)) {
					this.$toast('手机号格式不正确')
					return
				}
				if (this.checked[0]) {
					this.$modal.loading('发送验证码').then(res => {
						// getCode({
						// 	mobile: this.phonenumber
						// }).then(res => {
						this.$tab.navigateTo('code?phonenumber=' + this.phonenumber)
						this.$modal.closeLoading()
						// }).catch(() => this.$modal.closeLoading())

					})
				} else {
					this.$toast('未勾选同意《用户协议》和《隐私政策》')
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.container {
		position: relative;
		top: 0;
	}

	.login {
		.logo {
			width: 248rpx;
			height: 248rpx;
			margin-top: 242rpx;
		}

		.title {
			color: #232323;
			font-size: 42rpx;
			font-weight: bold;
			padding-bottom: 68rpx;
		}

		.ipt {
			width: 630rpx;
			height: 96rpx;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			border: 1rpx solid #DDE0E6;

			image {
				width: 36rpx;
				height: 36rpx;
				// margin-right: 20rpx;
			}

			input {
				flex: 1;
				caret-color: #FE3F59; //css3属性
				caret-width: 5px;
			}

			.sms {
				height: 100%;
				width: 5em;
				flex-shrink: 0;
				color: #1DD39B;
				position: relative;
				text-align: center;
				font-size: 28rpx;
			}

			.sms::after {
				content: '';
				position: absolute;
				width: 2rpx;
				height: 30rpx;
				background-color: #1DD39B;
				top: 50%;
				left: -13rpx;
				transform: translateY(-50%);
			}
		}



		.tips {
			position: absolute;
			bottom: calc(constant(safe-area-inset-bottom) + 32rpx);
			bottom: calc(env(safe-area-inset-bottom) + 32rpx);
			// color: red;
			// font-size: 24rpx;
			// padding-top: 10rpx;
		}

	}
</style>